<template>
  <div>
    <el-autocomplete
      v-model="produceNo"
      v-loading="loading"
      class="inline-input"
      :fetch-suggestions="selectProduceList"
      :disabled="disabled"
      placeholder="请输入排产编号"
      style="width: 100%"
      clearable
      @select="handleSelectProduce"
    >
      <template slot-scope="{ item }">
        <div>{{ item.produceNo }}</div>
      </template>
      <el-button
        slot="append"
        icon="el-icon-search"
        :disabled="disabled"
        @click="openProduceDialog"
      />
    </el-autocomplete>
    <div v-if="produceVisible">
      <produce-module ref="produceModule" :visible="produceVisible" @close="closeProduceDialog" />
    </div>
  </div>
</template>

<script>

import { selectByProduceNo } from '@/api/erp/produce'
import ProduceModule from '@/modules/produceModule.vue'

export default {
  name: 'ProduceQuery',
  components: { ProduceModule },
  props: {
    value: {
      type: String,
      default: undefined
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      produceVisible: false,
      produceNo: '',
      produceId: this.value,
      loading: false
    }
  },
  methods: {
    init(produceNo) {
      this.produceNo = produceNo
    },
    resetQueryForm() {
      this.produceNo = ''
      this.produceId = undefined
    },
    // 打开产品弹窗
    openProduceDialog() {
      this.produceVisible = true
      this.$nextTick(() => {
        this.$refs.produceModule.doPage()
      })
    },
    // 关闭产品弹窗
    closeProduceDialog(row) {
      if (row) {
        this.produceNo = row.produceNo
        this.$emit('choose', row)
      }
      this.produceVisible = false
    },
    // 产品选中
    handleSelectProduce(row) {
      if (row) {
        this.produceNo = row.produceNo
        this.$emit('choose', row)
      }
    },
    selectProduceList(query, callback) {
      this.loading = true
      selectByProduceNo({ produceNo: query }).then(resp => {
        if (resp.success) {
          callback(resp.data)
        }
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style scoped>

</style>
